import React, { useEffect, useState } from "react";
import { Search, Tag } from "react-vant";
import { DeleteO } from "@react-vant/icons";
import axios from "axios";
import { ListRowState } from "../../types";
import { useNavigate } from "react-router-dom";
import "./style.scss";
import notData from "../../assets/images/notData.jpeg";
const Index: React.FC = () => {
  const searchHistoryList = JSON.parse(
    localStorage.getItem("searchHistoryList") || "[]"
  );
  const [isSearch, setIsSearch] = useState(false);
  const [searchList, setSearchList] = useState<string[]>(searchHistoryList);
  const [list, setList] = useState<ListRowState[]>([]);
  const navigate = useNavigate();
  const fetchData = async (value: string) => {
    const resp = await axios.get("/api/list", { params: { value } });
    console.log(resp.data.data.data);
    setList(resp.data.data.data);
  };
  const deleteSearchList = () => {
    setSearchList([]);
  };

  const onSearch = (value: string) => {
    setSearchList([...new Set([value, ...searchList])]);
    setIsSearch(true);
    fetchData(value);
  };
  useEffect(() => {
    localStorage.setItem("searchHistoryList", JSON.stringify(searchList));
  }, [searchList]);

  return (
    <div>
      <Search
        shape="round"
        background="#4fc08d"
        placeholder="请输入搜索关键词"
        onSearch={(value) => onSearch(value)}
        onClear={() => {
          setIsSearch(false);
        }}
      />
      {isSearch ? (
        list.length === 0 ? (
          <img src={notData} className="no-data"></img>
        ) : (
          <div className="home-list">
            {list.map((v) => {
              return (
                <dl
                  key={v.id}
                  onClick={() => navigate("/detail/" + v.id, { state: v })}
                >
                  <dt>
                    <img src={v.image} alt="" />
                  </dt>
                  <dd>
                    <h4>{v.title}</h4>
                    <small>{v.word}</small>
                    <b>￥: {v.price}起</b>
                    <span>立即购买</span>
                  </dd>
                </dl>
              );
            })}
          </div>
        )
      ) : (
        <div style={{ padding: 10 }}>
          {searchList.length === 0 ? (
            <h4>暂无历史记录</h4>
          ) : (
            <div>
              <h4
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                }}
              >
                <span>历史记录</span>
                <DeleteO onClick={() => deleteSearchList()} />
              </h4>
              <div>
                {searchList.map((v, i) => {
                  return (
                    <Tag
                      key={i}
                      type="primary"
                      style={{ margin: 6 }}
                      onClick={() => onSearch(v)}
                    >
                      {v}
                    </Tag>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default Index;
